<template>
	<view class="control">
		<!-- <view class="back" @click="back">
			<u-icon name="arrow-left" color="#FFFFFF" size="25"></u-icon>
		</view> -->
		<view class="top">
			<!-- <view class="top_list"> -->
			<u-swiper :list="data.slider" height="450rpx" :indicator="true"></u-swiper>
			<!-- </view> -->
			<view class="postion">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
			</view>
		</view>
		<!-- <QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar> -->
		<view class="box-1">
			<!-- <image style="width: 100%" mode="widthFix" :src="data.cover"></image> -->
			<view class="box-list">
				<!-- <u-swiper :list="data.slider" height="450rpx" :indicator="true"></u-swiper> -->
			</view>
			<view class="detail-box">
				<view class="detail-1">
					{{ data.name }}
				</view>
				<view class="detail-2">
					{{data.remark}}
				</view>
				<view class="flex-between detail-3">
					<!-- <view class="flex-align">
						<view class="tag">初级</view>
						<view class="tag">成人</view>
					</view> -->
					<!-- <view class="info"> {{ data.classNum }}节课 </view> -->
				</view>
				<view class="flex-between detail-4">
					<view class="price">￥<text>{{ data.price_selling }}</text>起</view>
					<!-- <view class="info"> 剩余{{sum}}个名额 / 32人已报名 </view> -->
				</view>
			</view>
		</view>

		<view class="box-2">
			<!-- <view class="title">适用校区</view> -->
			<view class="flex-between" @click="openStoreShow">
				<view class="name">适用校区</view>
				<view class="flex-align icon">
					<text>{{ data.withArea.area_name }}</text>
					<u-icon name="arrow-right" color="rgb(153,153,153)" size="14"></u-icon>
				</view>
			</view>
		</view>

		<!-- <view class="box-3">
			<view class="flex-between image-1">
				<image
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/23486c439eebab21a0831787cad64d5ec2259398.png">
				</image>
				<image mode="aspectFit"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f2026f5c65ac585d47b3eef17833b262f362643a.png">
				</image>
				<image
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/cc377ae2075d6caa0f357da921b71bc58a241c79.png">
				</image>
				<image mode="aspectFit"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f2026f5c65ac585d47b3eef17833b262f362643a.png">
				</image>
				<image
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/14c51739ebdaf6d43df36b9b2423e843ef9cd9bc.png">
				</image>
				<image mode="aspectFit"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f2026f5c65ac585d47b3eef17833b262f362643a.png">
				</image>
				<image
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/da98d0fe4de57b84884b7b6e3998dfcb82e7c6a1.png">
				</image>
			</view>
			<view class="flex-between">
				<text>选择商品</text>
				<text>付款成功</text>
				<text>获取二维码</text>
				<text>到店核销</text>
			</view>
		</view> -->

		<!-- <view class="box-4"> -->
		<!-- 	<u-tabs :list="list1" lineWidth="30" @click="changeTab" :activeStyle="{
          color: 'rgb(47,117,250)',
          fontWeight: '700',
          fontSize: '28rpx',
        }" :inactiveStyle="{ color: 'rgb(153,153,153)', fontSize: '26rpx' }">
			</u-tabs> -->
			<!-- <view class="con" v-show="tabActiveIndex == index" v-for="(item, index) in list1">
				{{ item.remark }}
			</view> -->
			
		<!-- </view> -->

		<view class="box-2">
			<view class="title">课程详情</view>
			<view class="u-content">
				<u-parse :content="data.content"></u-parse>
			</view>
		</view>

		<view class="footer flex-align" v-if="train_enum_id == 1">
			<footerLeft></footerLeft>
			<view class="btn" @click="selectAlertShowlist">开始报名培训班</view>
		</view>
		<view class="footer flex-align" v-if="train_enum_id == 2">
			<footerLeft></footerLeft>
			<view class="btn" @click="selectAlertchang">开始报名长训</view>
		</view>
		<view class="footer flex-align" v-if="train_enum_id == 3">
			<footerLeft></footerLeft>
			<view class="btn" @click="selectAlertxiao">开始报名小班</view>
		</view>

		<!-- 场馆 -->
		<con-alert :show="alertShow" @close="close" title="适用场馆">
			<view class="select-list">
				<view class="item flex-align" v-for="item in data.venues" :key="item">
					<view class="image">
						<u--image radius="5" :src="item.venue_thumb" width="100%" height="100%"></u--image>
					</view>
					<view class="detail">
						<view>
							<view class="name">
								{{ item.venue_name }}
							</view>
							<view class="timer"> 营业时间：{{ item.open_time }} </view>
						</view>

						<view class="flex-between bottom">
							<view class="flex-align" style="width: 70%">
								<u-icon name="map-fill" color="#cacaca" size="12"></u-icon>
								<text class="address">{{ item.address }}</text>
							</view>
							<view class="flex-align">
								<text>{{ item.phone }}</text>
								<u-icon name="phone" color="#cacaca" size="12"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</con-alert>

		<!-- 选择弹窗 短训-->
		<con-alert :show="selectAlertShow" @close="close2" isFooter title="请选择">
			<!-- <con-alert :show="selectAlertShow" @close="close2" isFooter @click="handSubmit"> -->
			<view class="section">
				<view class="section-1 flex-align">
					<view class="image">
						<image :src="data.cover"></image>
					</view>
					<view class="detail">
						<view>
							<view class="detail-1">
								{{ data.name }}
							</view>
							<!-- 	<view class="flex-align" style="margin-top: 30rpx">
								<view v-for="(item, index) in checkedSpec" :key="index" style="margin-right: 10rpx">
									<u-tag :text="item.name"></u-tag>
								</view>
							</view> -->
						</view>
						<view style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              ">
							<view class="price">￥<text>{{ price }}</text>
							</view>
							<view class="detail-2">剩余名额:<text style="color: orange">{{
                  chooseStock
                }}</text></view>
						</view>
					</view>
				</view>

				<view class="section-2" v-for="(item, index) in data.data_specs" :key="index">
					<view class="sub-title">{{ item.name }}</view>
					<view class="tag-list">
						<u-tag v-for="(item2, index2) in item.list" :key="index2" :text="item2.name" :bgColor="
                checkedSpec.indexOf(item2) > -1
                  ? 'rgba(47, 117, 250, 0.05)'
                  : '#EFEFEF'
              " :borderColor="
                checkedSpec.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
              " :color="checkedSpec.indexOf(item2) > -1 ? '#2F75FA' : '#333'" @click="clickSpec(item2)" />
						<!-- <view class="tag" v-for="item2 in item.list" :key="item2">{{item2.name}}</view> -->

					</view>
				</view>
				<view class="btns" @click="handSubmit" v-if="chooseStock > 0">确定</view>
				<view class="btns_s" v-if="chooseStock == 0">确定</view>
			</view>
		</con-alert>

		<!-- 选择弹窗 小班-->
		<con-alert :show="selectAlertlist" @close="close3" isFooter title="请选择">
			<!-- <con-alert :show="selectAlertShow" @close="close2" isFooter @click="handSubmit"> -->
			<view class="section">
				<view class="section-1 flex-align">
					<view class="image">
						<image :src="data.cover"></image>
					</view>
					<view class="detail">
						<view>
							<view class="detail-1">
								{{ data.name }}
							</view>
							<view class="detail-1">
								剩余名额:{{ less_num }}
							</view>
							<!-- <view class="flex-align" style="margin-top: 30rpx">
								<view v-for="(item, index) in checkedSpec" :key="index" style="margin-right: 10rpx">
									<u-tag :text="item.name"></u-tag>
								</view>
							</view> -->
						</view>
						<view class="btns_ms">
							<view class="btns_m" @click="schedule" v-if="look">
								查看课表
							</view>
						</view>
						<view style="
			    display: flex;
			    align-items: center;
			    justify-content: space-between;
			  ">
							<view class="price">￥<text>{{ price_selling }}</text>
							</view>
							<!-- <view class="detail-2">剩余名额:<text style="color: orange">{{
			      chooseStock
			    }}</text></view> -->
						</view>
					</view>
				</view>
				<view class="section-2">
					<view class="sub-title">选择教练</view>
					<view class="top-menu-list">
						<view class="top-menu-item" v-for="(item, index) in sku_list" :key="index"
							@click="openKind(item,index)">
							<view class="add_na">
								<view :class="[
							  clickMenuId == item.coach_id ? 'menu-image' : 'menu-image-no-checked',
							]">
									<image style="border-radius: 50% 50%;" :src="item.coach_avatar"
										mode="scaleToFill" />
								</view>

								<text :class="[
							  clickMenuId == item.coach_id ? 'checked-text' : 'no-checked-text',
							]">{{ item.full_name }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="section-2" v-if="keshi">
					<view class="sub-title">选择课时</view>
					<view class="tag-list">
						<!-- <u-tag v-for="(item2, index2) in coach.toulist" :key="index2" :text="item2.name"  @click="clickSpec(item2)" /> -->
						<u-tag v-for="(item2,index2) in hour_list" :key="index2" :text="item2.hour_unit" type="warning"
							:bgColor="
							  data_name.indexOf(item2) > -1
							    ? 'rgba(47, 117, 250, 0.05)'
							    : '#EFEFEF'
							" :borderColor="
							  data_name.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
							" :color="data_name.indexOf(item2) > -1 ? '#2F75FA' : '#333'" @click="data_specss(item2,index2)" />
						<!-- <view class="tag" v-for="item2 in item.list" :key="item2">{{item2.name}}</view> -->

					</view>
				</view>

				<view class="section-2" v-if="xiaoqu">
					<view class="sub-title">选择校区</view>
					<view class="tag-list">
						<!-- <u-tag v-for="(item2, index2) in coach.toulist" :key="index2" :text="item2.name"  @click="clickSpec(item2)" /> -->
						<u-tag v-for="(item2,index2) in area_list" :key="index2" :text="item2.area_name" type="warning"
							:bgColor="
							  data_names.indexOf(item2) > -1
							    ? 'rgba(47, 117, 250, 0.05)'
							    : '#EFEFEF'
							" :borderColor="
							  data_names.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
							" :color="data_names.indexOf(item2) > -1 ? '#2F75FA' : '#333'" @click="data_list(item2,index2)" />
						<!-- <view class="tag" v-for="item2 in item.list" :key="item2">{{item2.name}}</view> -->

					</view>
				</view>

				<view class="btns" @click="handSubmit" v-if="less_num > 0">立即报名</view>
				<view class="btns_s" v-if="less_num == 0">立即报名</view>

				<con-alert :show="alertShowlist" @close="close_s" :title="full_name">
					<view class="select-list">
						<view class="item flex-align" v-for="(item,index) in courseData" :key="index">
							<view class="detail">
								<view class="flex-between bottom">
									<view class="flex-align" style="width: 10%">
										<text class="address">{{index}}</text>
									</view>
									<view class="flex-align" style="width: 20%">
										<text>{{item.course_name}}</text>
									</view>
									<view class="flex-align" style="width: 20%">
										<text>{{item.course_date}}</text>
									</view>
									<view class="flex-align" style="width: 10%">
										<text>{{item.name}}</text>
									</view>
									<view class="flex-align" style="width: 20%">
										<text>{{item.period_time}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</con-alert>
			</view>
		</con-alert>
	</view>
</template>

<script>
	import conAlert from "@/components/com-alert/com-alert.vue";
	import footerLeft from "@/components/footer-left/footer-left.vue";
	const train = require("@/api/train/index.js");
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	export default {
		components: {
			conAlert,
			footerLeft,
			QSNavbar,
		},
		data() {
			return {
				look:false,
				alertShowlist: false,
				alertShow: false,
				selectAlertShow: false, //选择商品 短训
				selectAlertlist: false, //选择商品 小班
				tabActiveIndex: 0,
				list1: [{
					name: "培训班简介"
				}, 
				// {
				// 	name: "用户须知"
				// },
				],
				timeData: {},
				id: 0,
				data: {},
				venue_name: "",
				checkedSpec: [],
				checkedSpecStr: "",
				price: "0.00",
				venue_id: 0,
				chooseStock: 0,
				sum: '',
				sku: '',
				project: [],
				coach: {
					name: '选择教练',
					toulist: [{
							name: '张三丰教练第一期'
						},
						{
							name: '张三丰教练第二期'
						},
						{
							name: '张三丰教练第三期'
						},
					]
				},
				namelist: "",
				namelists: "",
				elseStock: 0,
				elseStocks: 0,
				data_name: [],
				data_names: [],
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				train_enum_id: "",
				clickMenuId: 0,
				sku_list: [],
				hour_list: [],
				area_list: [],
				sku_id: "",
				price_selling: "",
				less_num: "",
				courseData: [],
				keshi: false,
				xiaoqu: false,
				goods_code: '',
				goods_sku: '',
				full_name:''
			};
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id;
			this.venue_name = options.venue_name;
			this.venue_id = options.venue_id;
			this.train_enum_id = options.train_enum_id;
			this.getTrainDetail();
		},
		methods: {
			// 长训班根据教练获取校区列表
			async areaslist() {
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					area_id: this.data.withArea.id,
				}
				let res = await train.area(postData);
				if (res.code == 1) {
					this.coach_list = res.data.list
				}
			},
			// 选择教练
			openKind(item, index, type) {
				console.log(item, index,'123')
				this.look = false
				this.full_name = item.full_name
				let _this = this
				this.courseData = []
				this.sku_id = ''
				this.hour_list = item.hour_list
				if (this.clickMenuId == item.coach_id) {
					this.clickMenuId = 0
					_this.hour_list = []
					_this.area_list = []
					this.keshi = false
					this.xiaoqu = false
					this.less_num = ''
					this.price_selling = ''
				} else {
					this.clickMenuId = item.coach_id;
					_this.area_list = []
					this.keshi = true
					this.xiaoqu = false
					this.less_num = ''
					this.price_selling = ''
				}
				if (this.clickMenuId === -1) {} else {

				}
				// uni.navigateTo({
				// 	url:"/pages/venues/kindDetail/kindDetail"
				// })
			},
			// 选择课时
			data_specss(item2, index2) {
				this.look = false
				this.xiaoqu = true
				this.namelist = item2.hour_num
				this.elseStock = 0
				this.area_list = []
				this.data_name = []
				this.data_names = []
				this.courseData = []
				this.sku_id = ''
				this.less_num = ''
				this.price_selling = ''
				this.namedata = item2.hour_num
				let data_name = []
				this.hour_list.forEach(item => {
					data_name.push(item)
				})
				data_name.some((item, index) => {
					if (item == item2) {
						this.data_name[index] = item2;
						this.$forceUpdate();
					}
				});

				this.hour_list.map((item, index) => {
					item.checked = index === index2 ? true : false
				})
				this.area_list = item2.area_list

			},
			// 选择校区
			data_list(item2, index2) {
				this.look = true
				this.courseData = []
				this.namelists = item2.area_name
				this.price_selling = item2.price_selling
				this.less_num = item2.less_num
				this.sku_id = item2.sku_id
				this.goods_code = item2.goods_code
				this.goods_sku = item2.goods_sku
				this.elseStocks = 0
				this.data_names = []
				this.namedatas = item2.area_name
				let data_names = []
				this.area_list.forEach(item => {
					data_names.push(item)
				})
				data_names.some((item, index) => {
					if (item == item2) {
						this.data_names[index] = item2;
						this.$forceUpdate();
					}
				});

				this.area_list.map((item, index) => {
					item.checked = index === index2 ? true : false
				})
				// this.hourList()

			},
			close_s() {
				this.alertShowlist = false;
			},
			close3() {
				this.selectAlertlist = false;
			},
			// 查看课表
			schedule() {
				this.alertShowlist = true;
				this.hourList()
			},
			selectAlertShowlist() {
				if (uni.getStorageSync("openid") == '') {
					uni.showToast({
						title: '请登录！',
						icon: 'exception',
						duration: 850
					});
					uni.reLaunch({
						url: '/pages/personal/personal'
					})
				} else {
					this.selectAlertShow = true
				}
			},

			selectAlertxiao() {
				if (uni.getStorageSync("openid") == '') {
					uni.showToast({
						title: '请登录！',
						icon: 'exception',
						duration: 850
					});
					uni.reLaunch({
						url: '/pages/personal/personal'
					})
				}  else {
					this.selectAlertlist = true
				}
			},

			clickSpec(name) {
				this.checkedSpecStr = "";
				this.checkedSpec.some((item, index) => {
					if (item.group == name.group) {
						this.checkedSpec[index] = name;
						this.$forceUpdate();
					}
				});
				this.checkedSpec.forEach((item, index) => {
					this.checkedSpecStr += `${item.group}::${item.name};;`;
				});
				this.checkedSpecStr = this.checkedSpecStr.substring(
					0,
					this.checkedSpecStr.lastIndexOf(";;")
				);
				this.getSkuData(this.checkedSpecStr);
			},
			// 课时列表
			async hourList() {
				let postData = {
					sku_id: this.sku_id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await train.hourList(postData);
				if (res.code == 1) {
					this.courseData = res.data.courseData


				}
			},
			// 获取培训班详情
			async getTrainDetail() {
				let postData = {
					train_id: this.id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await train.getTrainDetail(postData);
				if (res.code == 1) {
					// 开始报名培训班1  开始报名长训2   开始报名小班3
					this.data = res.data.train;
					this.areaslist()
					this.train_enum_id = res.data.train.train_enum_id
					if (this.train_enum_id == 1) {
						this.data = res.data.train;
						let defaultObj = this.data.data_specs;
						let defaultObjLength = this.data.data_specs.length;
						// int sum = 0;
						var data_items = this.data.data_items
						var sum = 0;
						data_items.forEach((item, index) => {
							sum += parseFloat(item[0].stock);
							this.sum = sum
							return sum;
						})

						for (var i = 0; i < defaultObjLength; i++) {
							this.checkedSpec.push(defaultObj[i].list[0]);
						}
						this.checkedSpecStr = "";
						this.checkedSpec.forEach((item, index) => {
							this.checkedSpecStr += `${item.group}::${item.name};;`;
						});
						this.checkedSpecStr = this.checkedSpecStr.substring(
							0,
							this.checkedSpecStr.lastIndexOf(";;")
						);
						this.getSkuData(this.checkedSpecStr);
					} else if (this.train_enum_id == 2) {

					} else if (this.train_enum_id == 3) {

						this.sku_list = this.data.sku_list

					}

				}
			},
			// 获取SKU数据
			getSkuData(checkedSpecStr) {
				for (var items = 0; items < this.data.data_items.length; items++) {
					if (checkedSpecStr == this.data.data_items[items][0].key) {
						this.price = this.data.data_items[items][0].selling;
						this.chooseStock = this.data.data_items[items][0].stock;
						this.sku = this.data.data_items[items][0].sku;
						this.sku_id = this.data.data_items[items][0].sku_id;

					}
				}
			},
			selectAlertchang() {
				let that = this
				if (uni.getStorageSync("openid") == '') {
					uni.showToast({
						title: '请登录！',
						icon: 'exception',
						duration: 850
					});
					uni.reLaunch({
						url: '/pages/personal/personal'
					})
				} else {
					uni.navigateTo({
						url: "./train_term?id=" + that.id + "&venue_name=" + that.venue_name + "&venue_id=" + that
							.venue_id + "&train_enum_id=" + that.train_enum_id,
					})
				}
			},
			handSubmit() {
				let checkedSpec = JSON.stringify(this.checkedSpec);
				let price = this.price;
				if (this.train_enum_id == 1) {
					// 培训
					uni.navigateTo({
						url: "/pages_other/train/selectStudy?id=" +
							this.data.id +
							"&checkedSpec=" +
							checkedSpec +
							"&price=" +
							price +
							"&venue_name=" +
							this.venue_name +
							"&train_enum_id=" +
							this.train_enum_id +
							"&venue_id=" +
							this.venue_id +
							"&chooseStock=" +
							this.chooseStock +
							"&sku_id=" +
							this.sku_id +
							"&sku=" +
							this.sku +
							"&skucode=" +
							this.data.code,
					});
				} else if (this.train_enum_id == 2) {

				} else if (this.train_enum_id == 3) {
					// 小班
					uni.navigateTo({
						url: "/pages_other/train/selectStudy?id=" +
							this.data.id + "&less_num=" +
							this.less_num + "&price_selling=" +
							this.price_selling +
							"&venue_name=" +
							this.venue_name +
							"&train_enum_id=" +
							this.train_enum_id +
							"&venue_id=" +
							this.venue_id +
							"&sku=" +
							this.goods_sku +
							"&skucode=" +
							this.goods_code + "&sku_id=" +
							this.sku_id,
					});

				}

			},
			changeTab(data) {
				this.tabActiveIndex = data.index;
			},
			close2() {
				this.selectAlertShow = false;
			},

			close() {
				this.alertShow = false;
			},
			openStoreShow() {
				this.alertShow = true;
			},
			onChange(e) {
				this.timeData = e;
			},
			back() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.u-content {
		padding: 24rpx;
	}

	.control {
		width: 100%;
		background-color: #f3f3f3;
		height: 100vh;
		overflow-y: auto;
		// min-height: 100vh;
		padding-bottom: 140rpx;

		.back {
			position: fixed;
			top: 100rpx;
			left: 20rpx;
			z-index: 3;
		}

		.top {
			position: relative;
			width: 100%;

			.postion {
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
				box-sizing: border-box;
			}
		}

		.box-1 {
			.box-list {
				display: block;
			}

			.header {
				background-color: #f8123e;
				height: 106rpx;
				padding-left: 30rpx;
				box-sizing: border-box;

				image {
					width: 77rpx;
					height: 70rpx;
					margin-right: 24rpx;
				}

				.price-1 {
					white-space: nowrap;
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					font-weight: 500;

					text {
						font-size: 44rpx;
						font-weight: 700;
					}
				}

				.tag {
					background-color: rgb(201, 17, 52);
					border-radius: 10rpx;
					padding: 4rpx 0;
					color: rgb(255, 255, 255);
					font-size: 18rpx;
					padding: 0px 8rpx;
					margin-left: 10rpx;
				}

				.price-2 {
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					font-weight: 500;
					white-space: nowrap;
					text-decoration: line-through;
				}

				.right {
					background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fb107487b55578cce969722f50a8e34d8160773c.png");
					background-repeat: no-repeat;
					background-size: 100% 100%;
					width: 222rpx;
					height: 106rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.info {
						color: rgb(248, 18, 62);
						font-size: 20rpx;
						font-weight: 700;
						white-space: nowrap;
					}

					.time {
						@include flex;
						align-items: center;

						&__custom {
							margin-top: 15rpx;
							width: 33rpx;
							height: 33rpx;
							background-color: rgb(248, 18, 62);
							border-radius: 4px;
							display: flex;
							justify-content: center;
							align-items: center;

							&__item {
								color: #fff;
								font-size: 20rpx;
								text-align: center;
							}
						}

						&__doc {
							padding: 0px 4px;
						}
					}
				}
			}

			.detail-box {
				padding: 30rpx 18rpx 30rpx 23rpx;
				background-color: rgb(255, 255, 255);
				box-sizing: border-box;

				.detail-1 {
					color: rgb(51, 51, 51);
					font-size: 40rpx;
					font-weight: 700;
				}

				.detail-2 {
					margin-top: 26rpx;
					color: rgb(136, 136, 136);
					font-size: 24rpx;
					line-height: 36rpx;
				}

				.detail-3 {
					margin-top: 24rpx;

					.tag {
						padding: 3rpx 15rpx;
						background-color: rgb(240, 242, 245);
						border-radius: 4rpx;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						margin-right: 9rpx;
					}

					.info {
						color: rgb(136, 136, 136);
						font-size: 24rpx;
						font-weight: 700;
					}
				}

				.detail-4 {
					margin-top: 20rpx;

					.price {
						color: rgb(255, 65, 5);
						font-size: 24rpx;

						text {
							font-size: 44rpx;
							font-weight: 700;
						}
					}

					.info {
						color: rgb(136, 136, 136);
						font-size: 24rpx;
						font-weight: 700;
					}
				}
			}
		}

		.box-2 {
			margin-top: 20rpx;
			padding: 30rpx 30rpx;
			background-color: rgb(255, 255, 255);

			.title {
				color: rgb(47, 117, 250);
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 40rpx;
			}

			.name {
				color: rgb(47, 117, 250);
				font-size: 28rpx;
				font-weight: 700;
			}

			.icon {
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				font-weight: 700;

				text {
					margin-right: 10rpx;
				}
			}
		}

		.box-3 {
			margin-top: 20rpx;
			padding: 40rpx 20rpx 40rpx 29rpx;
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 700;
			background-color: rgb(255, 255, 255);

			.image-1 {
				padding: 0 24rpx;
				margin-bottom: 26rpx;

				image {
					width: 47rpx;
					height: 46rpx;
				}
			}
		}

		.box-4 {
			margin-top: 20rpx;
			padding: 0rpx 20rpx 40rpx 29rpx;
			color: rgb(51, 51, 51);
			background-color: rgb(255, 255, 255);

			.con {
				margin-top: 20rpx;
			}
		}

		.footer {
			position: fixed;
			width: 100%;
			background-color: white;
			bottom: 0;
			left: 0;
			padding: 20rpx 25rpx 20rpx 25rpx;
			box-sizing: border-box;

			.menu {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 40rpx;

				image {
					width: 35rpx;
					height: 35rpx;
				}

				text {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 700;
					margin-top: 13rpx;
				}
			}

			.btn {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				padding: 26rpx 0;
				border-radius: 60rpx;
				background-color: #3e80fc;
				text-align: center;
				font-weight: 700;
			}
		}

		// 弹窗

		.select-list {
			.item {
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				height: 150rpx;
				border-bottom: 1px solid #cccccc;

				&:last-of-type {
					border: none;
					margin: 0;
					padding: 0;
				}

				.image {
					width: 150rpx;
					height: 100%;

					/deep/ .vue-ref {
						width: 100%;
						height: 100%;
					}
				}

				.detail {
					display: flex;
					height: 100%;
					flex: 1;
					width: 0;
					margin-left: 20rpx;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-weight: 700;
						font-size: 28rpx;
						margin-bottom: 15rpx;
					}

					.timer {
						color: #cacaca;
						font-size: 20rpx;
					}

					.bottom {
						font-size: 20rpx;
						color: #cacaca;

						.address {
							width: 70%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

		.section {
			.select-list {
				.item {
					margin-bottom: 20rpx;
					padding-bottom: 20rpx;
					height: 50rpx;
					border-bottom: 1px solid #cccccc;
					padding: 0;

					&:last-of-type {
						border: none;
						margin: 0;
						padding: 0;
					}

					.image {
						width: 150rpx;
						height: 100%;

						/deep/ .vue-ref {
							width: 100%;
							height: 100%;
						}
					}

					.detail {
						display: flex;
						height: 100%;
						flex: 1;
						width: 0;
						margin-left: 20rpx;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-weight: 700;
							font-size: 28rpx;
							margin-bottom: 15rpx;
						}

						.timer {
							color: #cacaca;
							font-size: 20rpx;
						}

						.bottom {
							font-size: 20rpx;
							color: #101010;

							.address {
								width: 70%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}

			.btns {
				background: linear-gradient(0deg, #528EFF, #2F75FA);
				border-radius: 20px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				padding: 26rpx 0;
				margin: 0px 30rpx;
				margin-top: 120rpx;
				text-align: center;
			}

			.btns_s {
				background: linear-gradient(0deg, #bebebe, #bebebe);
				border-radius: 20px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				padding: 26rpx 0;
				margin: 0px 30rpx;
				margin-top: 120rpx;
				text-align: center;
			}

			.btns_ms {
				// position: absolute;
				// right: 10rpx;
				// top: 110rpx;
				margin-left: 65%;
			}

			.btns_m {
				background: linear-gradient(0deg, #528EFF, #2F75FA);
				border-radius: 5px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				padding: 26rpx 0;
				width: 160rpx;
				height: 60rpx;
				text-align: center;
				line-height: 12rpx;

			}

			.btns_s {
				background: linear-gradient(0deg, #bebebe, #bebebe);
				border-radius: 20px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				padding: 26rpx 0;
				margin: 0px 30rpx;
				margin-top: 120rpx;
				text-align: center;
			}

			.section-1 {
				height: 200rpx;



				.image {
					width: 200rpx;
					height: 100%;
					margin-right: 26rpx;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.detail {
					flex: 1;
					width: 0;
					display: flex;
					height: 100%;
					flex-direction: column;
					justify-content: space-between;

					.detail-1 {
						font-size: 30rpx;
						font-weight: 600;
						margin-top: 10rpx;
						color: #333333;
					}

					.detail-2 {
						font-size: 24rpx;
						font-weight: 500;
						color: #888888;
						margin-top: 12rpx;
					}

					.price {
						font-size: 20rpx;
						font-weight: 500;
						color: #ff0000;

						text {
							font-size: 32rpx;
							font-weight: 700;
						}
					}
				}
			}

			.section-2 {
				margin-top: 50rpx;

				.top-menu-list {
					display: flex;
					flex-wrap: wrap;

					.top-menu-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 20%;
						// margin-top: 10rpx;
						padding: 0px 30rpx;
						box-sizing: border-box;
						font-size: 25rpx;

						.add_na {
							display: flex;
							flex-direction: column;
							align-items: center;
							width: 20%;
							// margin-top: 30rpx;
							padding: 0px 30rpx;
							box-sizing: border-box;
							font-size: 25rpx;

							.menu-image {
								width: 100rpx;
								height: 100rpx;
								// border-radius: 37rpx;
								// background: rgb(250, 237, 234);
								// background: linear-gradient(45deg,
								// 		rgba(250, 237, 234, 1) 0%,
								// 		rgba(246, 227, 216, 1) 77%);
								background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/60cb40ff572199778113a809978ef6aa0f09db36.png') 100% no-repeat;
								background-size: 100% 100%;
								// position: absolute;
								// top: 0;
								// right: 0;
								// z-index: 999;
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									width: 60rpx;
									height: 60rpx;
								}
							}

							.menu-image-no-checked {
								width: 100rpx;
								height: 100rpx;
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									width: 60rpx;
									height: 60rpx;
								}
							}

							.no-checked-text {
								white-space: nowrap;
							}

							.checked-text {
								margin-top: 20rpx;
								white-space: nowrap;
								font-weight: bold;
							}
						}
					}
				}

				.sub-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}



				.tag-list {
					display: flex;
					flex-wrap: wrap;

					/deep/.u-tag {
						margin-left: 30rpx;
						margin-bottom: 30rpx;
					}

					// .tag{
					// 	background: #EFEFEF;
					// 	border-radius: 3px;
					// 	font-size: 24rpx;
					// 	font-weight: 500;
					// 	color: #FFFFFF;
					// 	padding: 7rpx 20rpx;
					// 	margin-right: 20rpx;
					// 	margin-bottom: 20rpx;
					// }

				}
			}

			.section-3 {
				font-size: 22rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}
</style>
